<template>
	<view class="container">
		<!--头部-->
		<view class="status_bar"></view>
		<view class="head flex-row">
			<view class="left" @click="goBack"><uni-icons type="arrowleft" size="24" color="#333"></uni-icons></view>
			<view class="center">作业票审批</view>
			<view class="right"><image @click="toLog" src="../../../static/fengxianxuncha/log.png"></image></view>
		</view>
		<view id="body">
			<!--基础-->
			<view class="card">
				<view class="title">
					<view class="name">基础信息</view>
				</view>
				<view class="item flex-row">
					<view class="label">作业编号：</view>
					<view class="input">{{ form.job_num || '' }}</view>
				</view>
				<view class="item flex-row">
					<view class="label">开始日期：</view>
					<view class="input">{{ form.start_time.split(' ')[0] || '' }}</view>
				</view>
				<view class="item flex-row">
					<view class="label">开始时间：</view>
					<view class="input">{{ form.start_time.split(' ')[1] || '' }}</view>
				</view>
				<view class="item flex-row">
					<view class="label">结束日期：</view>
					<view class="input">{{ form.over_time.split(' ')[0] || '' }}</view>
				</view>
				<view class="item flex-row">
					<view class="label">结束时间：</view>
					<view class="input">{{ form.over_time.split(' ')[1] || '' }}</view>
				</view>
				<view class="item flex-row">
					<view class="label">审批时长：</view>
					<view class="input">预计{{ form.shenpi_hours }}小时</view>
				</view>
				<view class="item flex-row">
					<view class="label">级&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;别：</view>
					<view class="input">{{ form.level || '' }}</view>
				</view>
				<view class="item flex-row">
					<view class="label">作业地点：</view>
					<view class="input">{{ form.place || '' }}</view>
				</view>
				<view class="item flex-row">
					<view class="label">作业高度：</view>
					<view class="input">{{ others.type || '' }}</view>
				</view>
				<view class="item flex-row">
					<view class="label">危险辨识：</view>
					<view class="input">{{ form.dangers || '' }}</view>
				</view>
				<view class="item flex-row" style="align-items: flex-start;">
					<view class="label">作业内容：</view>
					<textarea v-model="form.content" disabled/>
				</view>
			</view>
			<!--负责人-->
			<view class="card">
				<!--作业人-->
				<view class="title">
					<view class="name">作业人信息</view>
				</view>
				<view class="people-card">
					<view v-for="(item, index) in workMembers" :key="index" class="people">
						<view class="flex-row">
							<view>姓名：{{ item.cert_man || '' }}</view>
							<view>工作：{{ item.job_class || '' }}</view>
						</view>
						<view>证件号：{{ item.num || '' }}</view>
					</view>
				</view>
				<!--审批人-->
				<view class="title">
					<view class="name">审批人信息（勾选为巡检人）</view>
				</view>
				<view class="people-card">
					<view v-for="(item, index) in checkMembers" :key="index" class="people flex-row">
						<view class="flex-row" style="width: 100%;justify-content: space-between;line-height: 1.4;">
							<text>审批人{{ index+1 }}：{{ item.name }}</text>
							<uni-icons v-if="item.checked == 'true'" type="checkbox" size="20" color="#007aff" class="select"></uni-icons>
							<uni-icons v-else type="checkbox" size="20" color="#eee" class="select"></uni-icons>
						</view>
					</view>
				</view>
				<!--监督人-->
				<view class="title">
					<view class="name">监督确认人</view>
				</view>
				<view class="people-card">
					<view class="people">{{ form.jiandu_man_name }}</view>
				</view>
			</view>
			<!--申请人-->
			<view class="card">
				<view class="title">
					<view class="name">申请人</view>
				</view>
				<view class="people-card">
					<view class="people">{{ form.apply_man_name }}</view>
				</view>
				<view class="title">
					<view class="name">申请人签字</view>
				</view>
				<view class="sign-image">
					<image :src="form.apply_sign"></image>
				</view>
			</view>
			<!--监督人-->
			<view class="card" v-if="form.status >= 1">
				<view class="title">
					<view class="name">监督确认人签字</view>
				</view>
				<view v-if="form.status > 1" class="item">签字人</view>
				<view v-if="form.status > 1" class="people-card">
					<view class="people">{{ jiandu_sign.name }}</view>
				</view>
				<view class="item">确认描述 <text v-if="form.status == 1" class="require">*</text></view>
				<view class="people-card">
					<textarea v-model="jiandu_sign.remark" placeholder="输入确认描述" />
				</view>
				<view class="item">确认签字 <text v-if="form.status == 1" class="require">*</text></view>
				<view v-if="jiandu_sign.sign_url" class="sign-image">
					<image :src="jiandu_sign.sign_url"></image>
				</view>
				<view v-else class="btns">
					<view @click="showSign" class="btn error">点击签字</view>
				</view>
			</view>
			<!--审批人-->
			<view class="card" v-if="form.status >= 2">
				<view class="title">
					<view class="name">审批人签字、说明</view>
				</view>
				<view v-if="form.status > 2" class="item">签字人</view>
				<view v-if="form.status > 2" class="people-card">
					<view class="people">{{ username }}</view>
				</view>
				<view v-if="form.status != 3" class="item">审批描述 <text v-if="form.status == 2" class="require">*</text></view>
				<view v-if="form.status != 3" class="people-card">
					<textarea v-model="shenpi_sign.remark" placeholder="输入确认描述" />
				</view>
				<view v-if="form.status != 3" class="item">审批签字 <text v-if="form.status == 2" class="require">*</text></view>
				<view v-if="form.status != 3 && shenpi_sign.sign_url" class="sign-image">
					<image :src="shenpi_sign.sign_url"></image>
				</view>
				<view v-if="form.status != 3 && !shenpi_sign.sign_url" class="btns">
					<view @click="showSign" class="btn error">点击签字</view>
				</view>
			</view>
			<!--现场教育-->
			<view class="card" v-if="form.status >= 4">
				<view class="title">
					<view class="name">现场教育</view>
				</view>
				<view class="item">现场视图 <text v-if="form.status == 4" class="require">*</text></view>
				<view class="item upload">
					<upload v-if="form.status == 4" @upload="uploadScenePic" @delete="delScenePic" :count="3"></upload>
					<upload v-else @upload="uploadScenePic" @delete="delScenePic" :files="xianchang_sign.pics" :count="3" :icon="false" :showBtn="false"></upload>
				</view>
				<view class="item">培训人签字 <text v-if="form.status == 4" class="require">*</text></view>
				<view v-if="xianchang_sign.trains.length">
					<view v-for="(item, index) in xianchang_sign.trains" :key="index" class="sign-image">
						<image :src="item"></image>
					</view>
				</view>
				<view v-if="form.status == 4" class="btns">
					<view @click="showSign('scene_train')" class="btn error">添加签字</view>
				</view>
				<view class="item">受训人签字 <text v-if="form.status == 4" class="require">*</text></view>
				<view v-if="xianchang_sign.reciveTrains.length">
					<view v-for="(item, index) in xianchang_sign.reciveTrains" :key="index" class="sign-image">
						<image :src="item"></image>
					</view>
				</view>
				<view v-if="form.status == 4" class="btns">
					<view @click="showSign('scene_reciveTrain')" class="btn error">添加签字</view>
				</view>
			</view>
			<!--申请人作业巡检-->
			<view class="card" v-if="form.status == 66">
				<view class="title">
					<view class="name">申请人作业巡检</view>
				</view>
				<view class="item">
					<view class="check-list flex-row">
						<text>1、申请人作业中巡检</text>
						<uni-icons type="arrowright" size="16" color="#999"></uni-icons>
					</view>
				</view>
			</view>
			<!--审批人作业巡检-->
			<view class="card" v-if="form.status == 66">
				<view class="title">
					<view class="name">审批人作业巡检</view>
				</view>
				<view class="item">
					<view class="check-list flex-row">
						<text>1、审批人作业中巡检</text>
						<uni-icons type="arrowright" size="16" color="#999"></uni-icons>
					</view>
				</view>
			</view>
			<!--结束人签字、说明-->
			<view class="card" v-if="form.status >= 6">
				<view class="title">
					<view class="name">作业结束签字</view>
				</view>
				<view v-if="form.status > 6" class="item">签字人</view>
				<view v-if="form.status > 6" class="people-card">
					<view class="people">{{ jiandu_sign.name }}</view>
				</view>
				<view class="item">结束描述 <text v-if="form.status == 6" class="require">*</text></view>
				<view class="people-card">
					<textarea v-model="end_sign.remark" placeholder="输入确认描述" />
				</view>
				<view class="item">结束签字 <text v-if="form.status == 6" class="require">*</text></view>
				<view v-if="end_sign.sign_url" class="sign-image">
					<image :src="end_sign.sign_url"></image>
				</view>
				<view v-else class="btns">
					<view @click="showSign" class="btn error">点击签字</view>
				</view>
			</view>
			<!--验收人签字、说明-->
			<view class="card" v-if="form.status >= 9">
				<view class="title">
					<view class="name">验收人签字、说明</view>
				</view>
				<view v-if="form.status > 9" class="item">签字人</view>
				<view v-if="form.status > 9" class="people-card">
					<view class="people">{{ yanshou_sign.name }}</view>
				</view>
				<view class="item">验收描述 <text v-if="form.status == 9" class="require">*</text></view>
				<view class="people-card">
					<textarea v-model="yanshou_sign.remark" placeholder="输入确认描述" />
				</view>
				<view class="item">验收签字 <text v-if="form.status == 9" class="require">*</text></view>
				<view v-if="yanshou_sign.sign_url" class="sign-image">
					<image :src="yanshou_sign.sign_url"></image>
				</view>
				<view v-else class="btns">
					<view @click="showSign" class="btn error">点击签字</view>
				</view>
			</view>
			<view class="btns flex-row" v-if="form.status == 1">
				<view @click="submitSuper(0)" class="btn error">监督确认不通过</view>
				<view @click="submitSuper(1)" class="btn">监督确认合格</view>
			</view>
			<view class="btns flex-row" v-if="form.status == 9">
				<view @click="submitAccept(0)" class="btn error">验收不通过</view>
				<view @click="submitAccept(1)" class="btn">验收合格</view>
			</view>
			<view class="btns flex-row" v-if="form.status == 2">
				<view @click="submitApproval(0)" class="btn error">审批不通过</view>
				<view @click="submitApproval(1)" class="btn">审批合格</view>
			</view>
			<view class="btns" v-if="form.status == 4">
				<view @click="submitStart" class="btn">开始作业</view>
			</view>
			<view class="btns" v-if="form.status == 6">
				<view @click="submitEnd" class="btn">结束作业</view>
			</view>
			<view class="btns" v-if="form.status == 10">
				<view @click="goBack" class="btn">返回上级</view>
			</view>
		</view>
		<!--签名弹出-->
		<uni-popup ref="popup" type="bottom" @change="toggleSign">
			<view class="popup-outter">
				<view class="popup-inner">
					<view class="popup-title">
						<text>签名</text>
						<view @click="clearClick" class="flex-row">
							<image src="../../../static/img/grid/clear.png" mode=""></image>
							<text>清除</text>
						</view>
					</view>
					<canvas
						canvas-id="firstCanvas" 
						disable-scroll='true' 
						@touchmove='move' 
						@touchstart='start($event)' 
						@touchend='end' 
						@touchcancel='cancel' 
						@longtap='tap' 
						@error='error'>
					</canvas>
					<view class="btns flex-row">
						<view @click="hideSign">返回看看</view>
						<view @click="overSign">签名</view>
					</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
import upload from '@/components/upload/index.vue';
import uniIcons from '@/components/uni-icons/uni-icons.vue';
import uniPopup from '@/components/uni-popup/uni-popup.vue';
import { date,isNull,jsonStrToObject } from '@/common/function.js';

var content = null;
var touchs = [];
var _that;

export default{
	components: { upload,uniIcons,uniPopup },
	data(){
		return {
			userid: uni.getStorageSync('userid'),
			username: '',
			job_id: '',
			form: {},
			others: {},	// 其他
			workMembers: [],	// 作业人员
			checkMembers: [],	// 审批人
			sign_url: '',
			sign_type: '',		// 签名的类型：主要用于现场教育
			jiandu_sign: {		// 监督人
				name: '',
				remark: '',
				sign_url: ''
			},
			shenpi_sign: {		// 审批人
				name: '',
				remark: '',
				sign_url: ''
			},
			xianchang_sign: {	// 现场教育
				pics: [],
				trains: [],
				reciveTrains: []
			},
			end_sign: {			// 结束作业
				name: '',
				remark: '',
				sign_url: ''
			},
			yanshou_sign: {		// 验收人
				name: '',
				remark: '',
				sign_url: ''
			}
		}
	},
	onLoad(option){
		// #ifdef APP-PLUS
		/* 隐藏凸起图标 */
		var icon = plus.nativeObj.View.getViewById("icon");
		setTimeout(function() {
			if(icon){icon.hide();}
		}, 100);
		// #endif
		
		// 处理数据
		this.job_id = option.id;
		this.getUserDetail();
		this.form = uni.getStorageSync('jobTicketFireDetail') || {};
		if(this.form.others) this.others = JSON.parse(this.form.others);
		if(this.form.work_man_info) this.workMembers = JSON.parse(this.form.work_man_info);
		if(this.form.shenpi_users) this.checkMembers = JSON.parse(this.form.shenpi_users);
		if(this.form.jiandu_sign) this.jiandu_sign = JSON.parse(this.form.jiandu_sign);
		if(this.form.shenpi_sign) this.shenpi_sign = JSON.parse(this.form.shenpi_sign);
		if(this.form.xianchang_sign) this.xianchang_sign = JSON.parse(this.form.xianchang_sign);
		if(this.form.end_sign) this.end_sign = JSON.parse(this.form.end_sign);
		if(this.form.yanshou_sign) this.yanshou_sign = JSON.parse(this.form.yanshou_sign);
		if(this.form.apply_man_name) this.form.apply_man_name = JSON.parse(this.form.apply_man_name);
		
		_that = this
		
		//获得Canvas的上下文
		content = wx.createCanvasContext('firstCanvas');
		//设置线的颜色
		content.setStrokeStyle("#000");
		//设置线的宽度
		content.setLineWidth(5);
		//设置线两端端点样式更加圆润
		content.setLineCap('round');
		//设置两条线连接处更加圆润
		content.setLineJoin('round');
	},
	methods: {
		goBack(){
			uni.navigateBack();
		},
		toLog(){
			uni.navigateTo({
				url: '../log?type=high&id='+this.form.id
			});
		},
		// 监督人签字确认
		submitSuper(isPass){
			// 校验并处理数据
			if(isNull(this.jiandu_sign.remark)) return uni.showToast({icon:'none', title: '请输入确认内容'});
			if(isNull(this.jiandu_sign.sign_url)) return uni.showToast({icon:'none', title: '请添加监督人确认签字'});
			this.jiandu_sign.name = this.username;
			
			// 提交
			uni.request({
				url: this.$API.jobTicketListSuperSign,
				method: "POST",
				data: {
					is_pass: isPass,
					userid: this.userid,
					job_id: this.job_id,
					jiandu_sign: JSON.stringify(this.jiandu_sign)
				},
				header: this.$API.get_head(),
				success: (res) => {
					if(res.data.code == 0){
						uni.navigateBack();
					}
				}
			})
		},
		// 审批人签字确认
		submitApproval(isPass){
			// 校验并处理数据
			if(isNull(this.shenpi_sign.remark)) return uni.showToast({icon:'none', title: '请输入确认内容'});
			if(isNull(this.shenpi_sign.sign_url)) return uni.showToast({icon:'none', title: '请添加监督人确认签字'});
			this.shenpi_sign.name = this.username;
			
			// 提交
			uni.request({
				url: this.$API.jobTicketListApprovalSign,
				method: "POST",
				data: {
					is_pass: isPass,
					userid: this.userid,
					job_id: this.job_id,
					shenpi_sign: JSON.stringify(this.shenpi_sign)
				},
				header: this.$API.get_head(),
				success: (res) => {
					if(res.data.code == 0){
						uni.navigateBack();
					}
				}
			})
		},
		// 开始作业
		submitStart(){
			// 校验并处理数据
			if(this.xianchang_sign.pics.length == 0) return uni.showToast({icon:'none', title: '请上传现场视图'});
			if(this.xianchang_sign.trains.length == 0) return uni.showToast({icon:'none', title: '请添加培训人签字'});
			if(this.xianchang_sign.reciveTrains.length == 0) return uni.showToast({icon:'none', title: '请添加受训人签字'});
			
			// 提交
			uni.request({
				url: this.$API.jobTicketListStartSign,
				method: "POST",
				data: {
					is_pass: 1,
					userid: this.userid,
					job_id: this.job_id,
					xianchang_sign: JSON.stringify(this.xianchang_sign)
				},
				header: this.$API.get_head(),
				success: (res) => {
					if(res.data.code == 0){
						uni.navigateBack();
					}
				}
			})
		},
		// 结束作业
		submitEnd(){
			// 校验并处理数据
			if(isNull(this.end_sign.remark)) return uni.showToast({icon:'none', title: '请输入结束描述'});
			if(isNull(this.end_sign.sign_url)) return uni.showToast({icon:'none', title: '请添加结束签字'});
			this.end_sign.name = this.username;
			
			// 提交
			uni.request({
				url: this.$API.jobTicketListEndSign,
				method: "POST",
				data: {
					userid: this.userid,
					job_id: this.job_id,
					end_sign: JSON.stringify(this.end_sign)
				},
				header: this.$API.get_head(),
				success: (res) => {
					if(res.data.code == 0){
						uni.navigateBack();
					}
				}
			})
		},
		// 验收确认
		submitAccept(isPass){
			// 校验并处理数据
			if(isNull(this.yanshou_sign.remark)) return uni.showToast({icon:'none', title: '请输入验收描述'});
			if(isNull(this.yanshou_sign.sign_url)) return uni.showToast({icon:'none', title: '请添加验收签字'});
			this.yanshou_sign.name = this.username;
			
			// 提交
			uni.request({
				url: this.$API.jobTicketListAcceptSign,
				method: "POST",
				data: {
					is_pass: isPass,
					userid: this.userid,
					job_id: this.job_id,
					yanshou_sign: JSON.stringify(this.yanshou_sign)
				},
				header: this.$API.get_head(),
				success: (res) => {
					if(res.data.code == 0){
						uni.navigateBack();
					}
				}
			})
		},
		// 上传现场教育图片
		uploadScenePic(obj){
			let _this = this;
			obj.temps.forEach(function(item,index){
				uni.showLoading({title: '上传中'});
				uni.uploadFile({
					url: _this.$API.upload,
					name: 'file',
					filePath: item,
					success: function(res) {
						uni.hideLoading();
						res.data = JSON.parse(res.data);
						_this.xianchang_sign.pics.push(_this.$API.baseURL + res.data.fileName);
					},
					fail(){
						uni.hideLoading();
						uni.showToast({
							icon: 'none',
							title: '上传失败'
						})
					}
				});
			});
		},
		// 删除现场教育图片
		delScenePic(obj){
			this.xianchang_sign.pics = this.xianchang_sign.pics.filter((item, idx)=>obj.index != idx);
		},
		// 处理JSON数组字符串
		doJsonStrToObject(jsonStr){
			let res = [];
			let jsonStrs = jsonStr.substr(1);
			jsonStrs = jsonStrs.substr(0, jsonStrs.length - 1);
			let jsonStrArr = jsonStrs.split('},');
			jsonStrArr.forEach((item, index)=>{
				if(index < jsonStrArr.length - 1) item = item+'}';
				res.push(jsonStrToObject(item));
			});
			return res;
		},
		//获取用户信息
		getUserDetail(){
			let _this = this;
			uni.request({
				url: this.$API.getUserDetail,
				method:"POST",
				data:{ userid: this.userid},
				header:this.$API.get_head(),
				success: (res) => {
					_this.username = res.data.data.NAME;
				}
			})
		},
		// 打开签名
		showSign(type = ''){
			this.$refs.popup.open();
			this.isShowSign = true;
			this.sign_type = type;
		},
		// 关闭签名
		hideSign(){
			this.$refs.popup.close();
			this.isShowSign = false;
			this.clearClick();
		},
		// 切换弹窗
		toggleSign(e){
			this.isShowSign = e.show;
			if(!e.show) this.clearClick();
		},
		// 上传签名
		uploadSign(filePath){
			let _this = this;
			uni.showLoading({title: '上传中'});
			uni.uploadFile({
				url: _this.$API.upload,
				name: 'file',
				filePath: filePath,
				success: function(res) {
					res.data = JSON.parse(res.data);
					let signUrl = res.data.fileName;
					
					// 上传图片
					uni.request({
						method: 'POST',
						url: _this.$API.gridUploadSignName,
						data: {
							userid: _this.userid,
							url: signUrl
						},
						header: _this.$API.get_head(),
						success: (res)=>{
							uni.hideLoading();
							uni.showToast({
								icon: 'none',
								title: res.data.message
							});
							if(res.data.code == 0){
								_this.hideSign();
								_this.sign_url = _this.$API.baseURL + signUrl;
								
								// 判断状态
								switch(_this.form.status){
									case 1: _this.jiandu_sign.sign_url = _this.sign_url; break;
									case 2: _this.shenpi_sign.sign_url = _this.sign_url; break;
									case 4: 
										if(_this.sign_type == 'scene_train') _this.xianchang_sign.trains.push(_this.sign_url);
										if(_this.sign_type == 'scene_reciveTrain') _this.xianchang_sign.reciveTrains.push(_this.sign_url);
										break;
									case 6: _this.end_sign.sign_url = _this.sign_url; break;
									case 9: _this.yanshou_sign.sign_url = _this.sign_url; break;
								}
							}
						},
						fail: function(res) {
							uni.hideLoading();
							uni.showToast({
								title:"上传失败",
								icon:'none'
							});
						}
					})
				},
				fail: function(res) {
					uni.hideLoading();
					uni.showToast({
						title:"上传失败",
						icon:'none'
					});
				}
			});
		},
		// 签名完成
		overSign: function() {
			let _this = this;
			if (this.isEnd) {
				uni.canvasToTempFilePath({
					canvasId: 'firstCanvas',
					success: function(res) {
						_this.uploadSign(res.tempFilePath);
					}
				})
			} else {
				uni.showToast({
					title: '请先完成签名',
					icon: "none",
					duration: 1500,
					mask: true
				})
			}
		
		},
		// 画布的触摸移动开始手势响应
		start: function(event) {
			//获取触摸开始的 x,y
			let point = {
				x: event.changedTouches[0].x,
				y: event.changedTouches[0].y
			}
			touchs.push(point);
		},
		// 画布的触摸移动手势响应
		move: function(e) {
			let point = {
				x: e.touches[0].x,
				y: e.touches[0].y
			}
			touchs.push(point)
			if (touchs.length >= 2) {
				this.draw(touchs)
			}
		},
		// 画布的触摸移动结束手势响应
		end: function(e) {
			// 设置为已经签名
			this.isEnd = true
			// 清空轨迹数组
			for (let i = 0; i < touchs.length; i++) {
				touchs.pop()
			}
		},
		// 画布的触摸取消响应
		cancel: function(e) {
			console.log("触摸取消" + e)
		},
		// 画布的长按手势响应
		tap: function(e) {
			console.log("长按手势" + e)
		},
		error: function(e) {
			console.log("画布触摸错误" + e)
		},
		//绘制
		draw: function(touchs) {
			let point1 = touchs[0]
			let point2 = touchs[1]
			touchs.shift()
			content.moveTo(point1.x, point1.y)
			content.lineTo(point2.x, point2.y)
			content.stroke()
			content.draw(true)
		},
		//清除操作
		clearClick: function() {
			this.isEnd = false
			
			// 获取设备宽度
			uni.getSystemInfo({
				success: function(res) {
					content.clearRect(0, 0, res.windowWidth, 200);
				}
			});
			content.draw(true)
		},
	}
}
</script>

<style scoped>
#body{
	height: calc(100vh - var(--status-bar-height) - 88upx);
	overflow-y: auto;
}

.sign-image{
	width: 100%;
	height: 300upx;
	margin-bottom: 20upx;
	background: #F0F0F0;
}
.sign-image image{
	width: 100% !important;
	height: 100% !important;
}

.check-list{
	font-size: 30upx;
	padding: 6upx 16upx;
	border-radius: 12upx;
	border: 2upx solid #eee;
}

textarea{
	width: 100%;
	height: 120upx;
	font-size: 28upx;
	background: #F2F2F2;
	padding: 12upx 18upx;
	border-radius: 12upx;
	box-sizing: border-box;
}

.people-card .people{
	padding: 0 14upx;
	margin-bottom: 20upx;
	border-radius: 10upx;
	background-color: #eee;
	position: relative;
}
.people-card .people .flex-row{
	justify-content: flex-start;
}
.people-card .people .flex-row view{
	width: 40%;
}
.people-card .people view{
	font-size: 28upx;
}
.people-card .people .pos{
	position: absolute;
	right: 20upx;
	top: 16upx;
}

.oper{
	color: #fff;
	font-size: 26upx;
	background: #007aff;
	border-radius: 10upx;
	padding: 2upx 20upx;
	display: inline-block;
}
	
.card{
	margin: 20upx;
	border-radius: 12upx;
	background: #fff;
	padding: 14upx 20upx 8upx;
	border: 2upx solid #F6F6F6;
	box-shadow: 0 0 4upx #eee;
}
.card .title{
	margin-bottom: 6upx;
}
.card .title view.name{
	height: 60upx;
	font-size: 32upx;
	text-indent: 24upx;
	position: relative;
}
.card .title view.name::before{
	content: '';
	width: 10upx;
	height: 26upx;
	background: #5F96F2;
	border-radius: 4upx;
	position: absolute;
	top: 14upx;
	left: 0;
}
.card .item{
	margin-bottom: 20upx;
}
.card .item.upload::after{
	content: '';
	display: block;
	clear: both;
}
.card .item .label{
	width: 180upx;
	font-size: 30upx;
}
.card .item textarea{
	width: calc(100% - 180upx);
	box-sizing: border-box;
}
.card .item .input{
	width: calc(100% - 180upx);
	height: 68upx;
	line-height: 68upx;
	padding: 0 20upx;
	background: #F2F2F2;
	border-radius: 12upx;
	box-sizing: border-box;
}
.card .item  input,
.card .item .value{
	height: 68upx;
	line-height: 68upx;
	font-size: 30upx;
}
.card .item.btns .input{
	padding: 0;
	background: none;
}
.btns{
	padding: 30upx 40upx 40upx;
}
.btns .btn{
	color: #fff;
	width: 260upx;
	height: 52upx;
	margin: 0 auto;
	font-size: 30upx;
	line-height: 52upx;
	border-radius: 6upx;
	text-align: center;
	background-color: #5F96F2;
}
.btn.error{
	background-color: red;
}
</style>
